<template>
  <div class="food-container">
    <!-- navbar导航栏 -->
    <van-nav-bar
      :title="$route.query.title"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <!-- 下拉筛选 -->
    <DropdownMenu class="DropdownMenu" @isNewSort="newSort" />

    <!-- 商铺数据 -->
    <van-pull-refresh
      v-model="refreshLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <HomeStore :storeList="storeList"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive } from 'vue'
import { getStore } from '@/api/home'
import DropdownMenu from './components/dropdown-menu.vue'
import HomeStore from '../home/components/home-store.vue'

defineComponent({
  name: 'FoodsIndex'
})

// 下拉刷新
const refreshLoading = ref(false)
const onRefresh = () => {
  refreshLoading.value = false
  storeList.value = []
  pageObj.page = 1
  finished.value = false
  loading.value = true
  onLoad()
}

// 获取附近商铺数据
const storeList = ref([])
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const pageObj = reactive({
  page: 1,
  limit: 10
})
const onLoad = async () => {
  try {
    const data = await getStore(pageObj.page, pageObj.limit)
    storeList.value.push(...data)
    storeListCopy.value.push(...data)
    intelligentSorting.value.push(...data)
    loading.value = false

    if (data.length) {
      pageObj.page++
    } else {
      finished.value = true
    }
  } catch (err) {
    loading.value = false
    error.value = true
    console.log(err)
  }
}

// 筛选数据
const storeListCopy = ref([])
const intelligentSorting = ref([])
const newSort = (name) => {
  if (name === '距离排序') {
    distanceSort()
    storeList.value = storeListCopy.value
  } else if (name === '销量排序') {
    salesSort()
    storeList.value = storeListCopy.value
  } else if (name === '起送价排序') {
    distributionPriceSort()
    storeList.value = storeListCopy.value
  } else if (name === '评分最高') {
    scoreSort()
    storeList.value = storeListCopy.value
  } else {
    storeList.value = intelligentSorting.value
  }
}

// 距离排序
const distanceSort = () => {
  storeListCopy.value.sort((a, b) => {
    const itemA = +a.distance.substring(0, 3)
    const itemB = +b.distance.substring(0, 3)
    if (itemA < itemB) {
      return -1
    }
    if (itemA > itemB) {
      return 1
    }
    return 0
  })
}
// 销量排序
const salesSort = () => {
  storeListCopy.value.sort((a, b) => {
    const itemA = +a.recent_order_num
    const itemB = +b.recent_order_num
    if (itemA < itemB) {
      return 1
    }
    if (itemA > itemB) {
      return -1
    }
    return 0
  })
}

// 起送价排序
const distributionPriceSort = () => {
  storeListCopy.value.sort((a, b) => {
    const itemA = +a.float_minimum_order_amount
    const itemB = +b.float_minimum_order_amount
    if (itemA < itemB) {
      return -1
    }
    if (itemA > itemB) {
      return 1
    }
    return 0
  })
}

// 评分排序
const scoreSort = () => {
  storeListCopy.value.sort((a, b) => {
    const itemA = +a.rating
    const itemB = +b.rating
    if (itemA < itemB) {
      return 1
    }
    if (itemA > itemB) {
      return -1
    }
    return 0
  })
}
</script>

<style scoped lang="less">
// 头部navbar
:deep(.van-icon) {
  color: #fff;
}
:deep(.van-nav-bar__content) {
    background-color: #0a92e7;
  }

:deep(.van-nav-bar__title) {
  color: #fff;
  font-size: 38px;
  font-weight: 500;
}

.food-container {
  padding-top: 172px;
}

</style>
